<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3480126_q9hrksv5bq.css">
    </link>
</head>

<body>
    <div class="nav">
        <div class="con">
            <div class="left">
                <div class="hh">
                    | 作家专区
                </div>
            </div>
            <div class="right">
                <div class="list">
                    <ul>
                        <li class="hd geth">番茄小说网</li>
                        <li class="hd">作家福利</li>
                        <li class="hd">作家课堂</li>
                        <li class="hd">帮助中心</li>
                    </ul>
                </div>
                <div class="list2">
                    <div class="lr">
                        <span class="llrr">登录</span>
                        <span class="s">|</span>
                        <span class="llrr">注册</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="gt">
            <div class="nv">
                <span class="o">作家专区</span> / <span class="os">作家公告</span>
            </div>
            <div class="news">
                <h3>作家公告</h3>
            </div>
            <div class="listdd">
                <div class="alist">
                    <ul>
                        <li class="sgs">全部</li>
                        <li class="sgs">连载资讯</li>
                        <li class="sgs">官方课堂</li>
                        <li class="sgs">活动通知</li>
                        <li class="sgs">作家访谈</li>
                    </ul>
                </div>
                <div class="rs">
                    <ul class="us">

                    </ul>
                </div>
            </div>
            <div class="ft_btn">
                <div class="bc"><button class="sj">上一页</button></div>
                <ul class="btns_">

                </ul>
                <div class="br"><button class="skj">下一页</button></div>

            </div>
        </div>
    </div>
    <div class="footer">
        <div class="ff">
            <div class="cont">
                <div class="left">
                    <div class="top">

                    </div>
                    <div class="cc">

                    </div>
                    <div class="ft">
                        <ul>
                            <li>2022 北京时光荏苒科技有限公司</li>
                            <li>京ICP备18018851号-8 |京公网安备 11010802030409号 | 京ICP证 京B2-20200085号 |</li>
                            <li>网络文化经营许可证：京网文[2020]1043-169号</li>
                            <li>请使用者仔细阅读《番茄小说网用户协议》、《番茄小说网隐私政策》说明</li>
                            <li>广告投放：www.oceanengine.com 不良信息举报：fanqiejubao@bytedance.com</li>
                            <li>意见建议邮箱：original_articles@bytedance.com 版权咨询：1748420113@qq.com</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="xcx">
                    <div class="ig">
                        <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/5180eh7pldnuhog/muye-novel-web-pc/dycode.png"
                            alt="">
                    </div>
                    <div class="tx">
                        <p><i class="iconfont icon-douyin"></i> 打开抖音扫码关注官方账号</p>
                    </div>
                </div>
                <div class="code_ma">
                    <div class="m">
                        <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/5180eh7pldnuhog/muye-novel-web-pc/wechat.png"
                            alt="">
                    </div>
                    <div class="tt">
                        <p><i class="iconfont icon-weixin1"></i> 扫码关注微信公众号</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    let us = document.querySelector('.us');
    let sgs = document.querySelectorAll('.sgs');
    sgs[0].style.backgroundColor = 'rgba(255,95,0,.16)'
    for (let i = 0; i < sgs.length; i++) {
        sgs[i].onclick = function () {
            for (let i = 0; i < sgs.length; i++) {
                sgs[i].style.backgroundColor = ""
            }
            this.style.backgroundColor = "rgba(255,95,0,.16)"
        }
    }
    const result = async () => {
        let lgt = await axios.post('/zone', {});
        let pages = Math.ceil(lgt.data.data.all.length / 10);
        let limit = 10;
        let offset = 0;
        let res = await axios.post('/zone', {
            limit: limit,
            offset: offset
        })
        let data = [...res.data.data.all]
        data.map(el => {
            let li = document.createElement("li");
            let p1 = document.createElement("p");
            let p2 = document.createElement("p");
            p1.innerHTML = el.content;
            p2.innerHTML = el.create_time;
            li.appendChild(p1);
            li.appendChild(p2);
            us.appendChild(li);
        })
        let btnss = document.querySelector(".btns_")
        let ka = new Array(pages).fill(0)
        ka.map((el, index) => {
            let lli = document.createElement(`li`)
            lli.innerHTML = index + 1
            btnss.appendChild(lli);
            lli.addEventListener("click", async () => {
                us.innerHTML = ""
                offset = index * limit
                let resd = await axios.post('/zone', {
                    limit: limit,
                    offset: offset
                })
                data = [...resd.data.data.all]
                data.map(el => {
                    let li = document.createElement("li");
                    let p1 = document.createElement("p");
                    let p2 = document.createElement("p");
                    p1.innerHTML = el.content;
                    p2.innerHTML = el.create_time;
                    li.appendChild(p1);
                    li.appendChild(p2);
                    us.appendChild(li);
                })
            });
        })
    }
    result()
    let geth = document.querySelector('.geth')
    geth.addEventListener('click',()=>{
        window.location.href = '/public/home/index.html'
    })
    let hds = document.querySelectorAll(".hd");
    hds[2].style.color = "#ff5000";
    hds[2].style.borderBottom = "2px solid #ff5000";
    for (let i = 0; i < hds.length; i++) {
        hds[i].onclick = function () {
            for (let i = 0; i < hds.length; i++) {
                hds[i].style.color = ""
                hds[i].style.borderBottom = ""
            }
            this.style.color = "#ff5000"
            this.style.borderBottom = "2px solid #ff5000"
        }
    }
</script>

</html>